<template>
  <div class="comment-item">
     <van-cell class="user-info" >
        <van-image
          slot="icon"
          class="avatar"
          round
          fit="cover"
          :src="comment.aut_photo"
        />
        <div slot="title" class="title-warp">
          <div class="user-name">{{comment.aut_name}}</div>
          <van-button 
          class="like-btn" 
          :class="{
            liked:comment.is_liking
          }"
          :icon="comment.is_liking?'good-job':'good-job-o'"
          @click="onCommentLick"
          >
          {{comment.like_count>0?comment.like_count:'赞'}}
          </van-button>
        </div>
        <div slot="label">
          <p class="comment-content">{{comment.content}}</p>
          <div class="button-info">
            <div class="comment-pubdate">{{comment.pubdate|relativeTime}}</div>
            <van-button
            class="reply-btn"
            round
            @click="$emit('reply-click',comment)"
            >回复{{comment.reply_count}}</van-button>
          </div>

        </div>
        
      </van-cell>
  </div>
</template>
<script>
import {addCommentLikeAPI,deleteCommentLikeAPI} from '@/api';



export default {
  name:"CommentItem",
  components:{},
  props:{
    comment:{
      type:Object,
      required:true
    }
  },
  data(){
    return {}
  },
  computed:{},
  watch:{},
  methods:{
    async onCommentLick(){
      try{
        if(this.comment.is_liking){
          //已点赞  则取消点赞
          await deleteCommentLikeAPI(this.comment.com_id)
          this.comment.like_count--
        }else{
          //未点赞  则添加点赞
          await addCommentLikeAPI(this.comment.com_id)
          this.comment.like_count++
          // this.$emit('commentIsLike')
        }
        this.comment.is_liking=!this.comment.is_liking
        //更新数据
        this.$toast.success(this.comment.is_liking?"取消点赞":"点赞成功")
      }catch(err){
        this.$toast.fail("操作失败,请稍后重试!")
      }
    }
  }
}
</script>
<style lang="less" scoped>
.comment-item{
  border-bottom: 1px solid rgb(232, 232, 232);
  .avatar {
    width: 72px;
    height: 72px;
    margin-right: 25px;
  }
  .title-warp{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .user-name{
      font-size: 26px;
      color: #406599;
    }
  }
  .comment-content{
    font-size: 32px;
    color:#222222;
  }
  .button-info{
    display: flex;
    align-items: center;
  }
  .comment-pubdate {
    font-size: 19px;
    color: #222;
    margin-right: 25px;
  }
  .reply-btn {
    // width: 135px;
    height: 48px;
    line-height: 48px;
    font-size: 21px;
    color: #222;
  }
  .like-btn{
    height: 30px;
    padding: 0;
    border: none;
    font-size: 19px;
    line-height: 30px;
    margin-right: 7px;
    .van-icon {
      font-size: 30px;
    }
    &.liked{
      color: #E5645F;
    }
  }


}
</style>